// src\containers\Person\index.jsx
// Person组件（容器组件+UI组件）
import React, { Component } from 'react'
import { connect } from 'react-redux'
// 生成唯一id
import {nanoid} from 'nanoid'
// 引入Person的action
import {addPersonAction} from '../../redux/person_action'
class Person extends Component {
    addPerson=()=>{
        const {value:nameValue}=this.nameNode;
        const {value:ageValue}=this.ageNode;
        console.log("Person的UI组件:",nameValue,ageValue);
        this.props.jiaren({id:nanoid(),name:nameValue,age:ageValue});
        this.nameNode.value="";
        this.ageNode.value="";
    }
  render() {
    console.log("props",this.props);
    return (
      <div>
        <h4>Person组件</h4>
        <p>计算的结果为：{this.props.count}</p>
        <input ref={c=>this.nameNode=c} type='text' placeholder='输入名字'></input>
        <input ref={c=>this.ageNode=c} type='text' placeholder='输入年龄'></input>
        <button onClick={this.addPerson}>添加人员</button>
        <ul>
            {
                this.props.personList.map(item=>{
                    return <li key={item.id}>{item.name}-----{item.age}</li>
                })
            }
        </ul>
      </div>
    )
  }
}

export default connect(
    state=>({personList:state.rens,
        count: state.he,}),
    {
       jiaren:addPersonAction
    }

)(Person);


